(function drop_down_list(){
    let secondary=document.querySelectorAll(".secondary")
    let se_right=document.querySelectorAll('.secondary .right'),
        drop_list=document.querySelectorAll('.drop_list');
    for(let i=0;i<secondary.length;i++){
        secondary[i].addEventListener('click',function(){
            for(let j=0;j<secondary.length;j++){
                secondary[j].classList.remove('change')
                secondary[j].classList.remove('left_border')
                if(secondary[j].querySelector('.right')){
                    secondary[j].querySelector('.right').style.transform='rotate(0deg)';
                    secondary[j].querySelector('.right').style.transition='.3s'
                    secondary[j].classList.remove('drop_down')
                }
            }
            for(let j=0;j<drop_list.length;j++){
                drop_list[j].style.height='0'
                drop_list[j].style.transition='.3s'
                drop_list[j].classList.remove('left_border')
            }
            this.classList.add('change')
            this.classList.add('left_border')
            if(this.classList.contains('drop_down')){
                this.classList.remove('drop_down')
                if(this.querySelector('.right')){
                    this.querySelector('.right').style.transform='rotate(0deg)';
                    this.querySelector('.right').style.transition='.3s'
                }
            }else{
                this.classList.add('drop_down')
                if(this.querySelector('.right')){
                    this.querySelector('.right').style.transform='rotate(-270deg)';
                    this.querySelector('.right').style.transition='.3s'
                }
            }
            for(let j=0;j<se_right.length;j++){
                if(se_right[j].parentNode.classList.contains('change')){
                    drop_list[j].style.height=50*(drop_list[j].querySelectorAll('li').length)+'px';
                    drop_list[j].style.transition='.3s'
                    drop_list[j].classList.add('left_border')
                }
            }
        })
    }
    let drop_li=document.querySelectorAll('.drop_list li');
    for(let i=0;i<drop_li.length;i++){
        drop_li[i].addEventListener('click',function(){
            for(let j=0;j<drop_li.length;j++){
                drop_li[j].style.color="#5c798f"
            }
            this.style.color="#fff";
        })
    }
})();